<template>
    <div class="card">
        <img :src="imageSrc">
        <span>{{ title }}</span>
    </div>
</template>
<script>
export default {
    props: {
        imgSrc: {
            type: String,
            default: ""
        },
        title: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
        }
    },
    computed: {
        imageSrc() {
            return require('@/assets/img/' + this.imgSrc); // 假设你的图片在src/assets目录下
        }
    }
}
</script>
<style>
.card {
    width: 2.5rem;
    height: .875rem;
    background-color: #fff;
    padding: .125rem;
    display: flex;
    align-items: center;
    margin-right: .25rem;
    margin-bottom: .25rem;
}

.card img {
    width: 30%;
    /* height: 20%; */
}

.card span {
    display: inline-block;
    padding: 0 .25rem;
    font-size: .1875rem;
}
</style>